<template>
  <div class="home">
    <header class="home-header">
      <HomeHeader />
    </header>
    <main class="home-main" @scroll="handleScroll">
      <HomeSlider />
      <HomeBanner />
      <HomeNav />
      <HomeNavSwipe />
      <HomeDdq />
      <HomeBrand />
      <HomeGroup />
      <HomeFooter />
      <div class="nomore" v-if="pageId > 20">没有更多了！</div>
      <div class="home-gotop" @click="goTop">
        <van-icon name="arrow-up" />
      </div>
      <div class="home-aside">
        <img
          src="https://img.alicdn.com/imgextra/i2/2053469401/O1CN01Lbywhc2JJi63kfJut_!!2053469401.gif?v=16237279691831601039"
          alt=""
        />
      </div>
    </main>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import HomeHeader from "@/components/HomeHeader/index.vue";
import HomeSlider from "@/components/HomeSlider/index.vue";
import HomeBanner from "@/components/HomeBanner/index.vue";
import HomeNav from "@/components/HomeNav/index.vue";
import HomeNavSwipe from "@/components/HomeNavSwipe/index.vue";
import HomeDdq from "@/components/HomeDdq/index.vue";
import HomeBrand from "@/components/HomeBrand/index.vue";
import HomeGroup from "@/components/HomeGroup/index.vue";
import HomeFooter from "@/components/HomeFooter/index.vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    HomeHeader,
    HomeSlider,
    HomeBanner,
    HomeNav,
    HomeNavSwipe,
    HomeDdq,
    HomeBrand,
    HomeGroup,
    HomeFooter,
  },
  setup() {
    const pageId = ref(1);
    const store = useStore();
    const getFooterFind = () =>
      store.dispatch({
        type: "home/getFindList",
        data: {
          pageId: pageId.value,
          pageSize: 20,
          entityId: 4,
          type: 1,
          version: "v1",
          advVersion: 1,
          tuserId: 771131,
          isWechat: 0,
        },
      });
    const goTop = () => {
      const main = document.querySelector<any>(".home-main");
      main.scrollTop = 0;
    };
    let timer: any = null;
    let prev = 0;
    const handleScroll = () => {
      const main = document.querySelector<any>(".home-main");
      const back = document.querySelector<any>(".home-gotop");
      const aside = document.querySelector<any>(".home-aside");
      // console.log(main.scrollHeight - main.scrollTop - main.offsetHeight);
      let now = Date.now();
      if (
        main.scrollHeight - main.scrollTop - main.offsetHeight < 1 &&
        pageId.value <= 20 &&
        now - prev > 500
      ) {
        getFooterFind();
        pageId.value++;
        prev = now;
      }
      if (timer) {
        clearTimeout(timer);
      }
      aside.style.opacity = "0.8";
      aside.style.right = "-0.2rem";
      if (main?.scrollTop > window.innerHeight) {
        back.style.bottom = "0.8rem";
      } else {
        back.style.bottom = "-0.8rem";
      }
      timer = setTimeout(() => {
        aside.style.opacity = "1";
        aside.style.right = "0.1rem";
      }, 1000);
    };
    return {
      goTop,
      handleScroll,
      pageId,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home {
  .home-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgb(255, 124, 13);
    z-index: 100;
  }

  .home-main {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.73rem;
    bottom: 0.5rem;
    overflow: auto;
    padding: 0 0.1rem 0.1rem;
    background: rgb(255, 124, 13);

    .home-gotop {
      width: 0.35rem;
      height: 0.35rem;
      background: rgba(51, 51, 51, 0.8);
      z-index: 102;
      position: fixed;
      bottom: -0.8rem;
      right: 0.2rem;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      transition: all 0.4s;

      /deep/ .van-icon {
        font-size: 0.16rem;
      }
    }

    .home-aside {
      position: fixed;
      right: 0.1rem;
      bottom: 0.85rem;
      z-index: 101;
      width: 0.6rem;
      height: 0.6rem;
      transition: all 0.4s;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .nomore {
      color: #888888;
      text-align: center;
      margin-top: 0.1rem;
      padding-bottom: 0.1rem;
    }
  }
}
</style>
